---
import DropdownMenu from "#/components/DropdownMenu.astro"
import { Icon } from "astro-icon/components"
import ExternalLinkIcon from "./ExternalLinkIcon.astro"

const menuItems = [
  {
    url: "/learn",
    name: "learn",
    highlight: false,
    external: false,
  },
  {
    url: "/ecosystem",
    name: "ecosystem",
    highlight: false,
    external: false,
  },
  {
    url: "/roadmap",
    name: "roadmap",
    highlight: false,
    external: false,
  },
  {
    url: "/blog",
    name: "blog",
    highlight: false,
    external: false,
  },
  {
    url: "/team",
    name: "team",
    highlight: false,
    external: false,
  },
  {
    url: "https://docs.union.build/",
    name: "docs",
    highlight: false,
    external: true,
  },
  {
    url: "https://research.union.build/",
    name: "research",
    highlight: false,
    external: true,
  },
  // {
  //   url: "https://app.union.build",
  //   name: "testnet",
  //   highlight: false,
  //   external: true
  // }
]
---

<header class="z-[100] w-full flex justify-around">
  <div class="max-w-6xl min-h-[68px] flex flex-1 items-center px-4 sm:px-6 drop-shadow-2xl">
    <a
      href="/"
      id="union-logo"
      class="flex items-center"
    >
      <img
        class="h-12 w-auto py-1 text-accent-500"
        src="/logo-full.svg"
      />
    </a>

    <nav class="hidden lg:block flex-1 justify-end">
      <ul class="flex flex-row gap-8 justify-end items-center left-0 top-[62px] shadow-3xl p-0 m-0 font-normal list-none sm:align-middle text-white">
        {
          menuItems.map((menuItem) => (
            <li>
              <a
                href={menuItem.url}
                class:list={[
                  "text-normal flex items-center gap-1.5 flex-1 uppercase font-mono font-bold",
                  { "text-accent-500": menuItem.highlight },
                ]}
                {...(menuItem.external
                ? {
                  target: "_blank",
                  rel: "noopener noreferrer",
                }
                : {})}
              >
                {menuItem.name}
                {
                  menuItem.external ? (
                    <ExternalLinkIcon class="-mt-0.5 -mr-2 size-4 text-neutral-500" />
                  ) : (
                ""
              )
                }
              </a>
            </li>
          ))
        }
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://discord.union.build"
          >
            <Icon
              name="tabler:brand-discord-filled"
              color="#fff"
              size="20px"
            />
            <span class="sr-only">Discord</span>
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://github.com/unionlabs/union"
          >
            <Icon
              name="fa6-brands:github"
              color="#fff"
              size="20px"
            />
            <span class="sr-only">GitHub</span>
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://www.youtube.com/@union_build"
          >
            <Icon
              name="fa6-brands:youtube"
              color="#fff"
              size="20px"
            />
            <span class="sr-only">YouTube</span>
          </a>
        </li>
        <li>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://x.com/union_build"
          >
            <Icon
              name="fa6-brands:x-twitter"
              color="#fff"
              size="18px"
            />
            <span class="sr-only">X</span>
          </a>
        </li>
      </ul>
    </nav>

    <DropdownMenu />
  </div>
</header>

<style is:inline>
header {
  max-height: var(--header-height) !important;
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
}

#union-logo {
  z-index: 1000;
}
</style>
